<template>
  <div v-for="item in styleKeys">
    <FormItemWraaper v-if="item === 'width'" v-bind="$attrs" :selectedWidget="selectedWidget" :editorProps="editorProps" :name="[item]">
      <Input v-model:value="value.width" :placeholder="editorProps.placeholder || '请输入宽度'" />
    </FormItemWraaper>

    <FormItemWraaper v-if="item === 'textAlign'" v-bind="$attrs" :selectedWidget="selectedWidget" :editorProps="editorProps" :name="[item]">
      <SelectEditor :formItemFlag="false" v-model:value="value.textAlign" :designer="designer" :editorProps="{ options: textAlignOptions }" />
    </FormItemWraaper>

    <FormItemWraaper v-if="item === 'paddingTop'" v-bind="$attrs" :selectedWidget="selectedWidget" :editorProps="editorProps" :name="[item]">
      <Input style="width: 100%" v-model:value="value.paddingTop" :placeholder="editorProps.placeholder || '请输入'" />
    </FormItemWraaper>

    <FormItemWraaper v-if="item === 'paddingBottom'" v-bind="$attrs" :selectedWidget="selectedWidget" :editorProps="editorProps" :name="[item]">
      <Input style="width: 100%" v-model:value="value.paddingBottom" :placeholder="editorProps.placeholder || '请输入'" />
    </FormItemWraaper>

    <FormItemWraaper v-if="item === 'marginTop'" v-bind="$attrs" :selectedWidget="selectedWidget" :editorProps="editorProps" :name="[item]">
      <Input style="width: 100%" v-model:value="value.marginTop" :placeholder="editorProps.placeholder || '请输入'" />
    </FormItemWraaper>

    <FormItemWraaper v-if="item === 'marginBottom'" v-bind="$attrs" :selectedWidget="selectedWidget" :editorProps="editorProps" :name="[item]">
      <Input style="width: 100%" v-model:value="value.marginBottom" :placeholder="editorProps.placeholder || '请输入'" />
    </FormItemWraaper>

    <FormItemWraaper v-if="item === 'fontSize'" v-bind="$attrs" :selectedWidget="selectedWidget" :editorProps="editorProps" :name="[item]">
      <Input style="width: 100%" v-model:value="value.fontSize" :placeholder="editorProps.placeholder || '请输入'" />
    </FormItemWraaper>
  </div>
</template>
<script lang="ts" name="style-editor" setup>
  import { ref, computed, watch, onMounted } from "vue"
  import { useRuleFormItem } from "/@/hooks/component/useFormItem"
  import { useI18n } from "/@/hooks/web/useI18n"
  import FormItemWraaper from "./PropFormItemWrapper.vue"
  import { Input, InputNumber } from "ant-design-vue"
  import type { Designer } from "../../type"
  import SelectEditor from "./SelectEditor.vue"
  const { t } = useI18n("diyForm")

  const props = defineProps({
    value: { type: Object, default: () => {} },
    editorProps: { type: Object, default: () => {} },
    selectedWidget: Object,
    designer: { type: Object as () => Designer },
  })

  const styleKeys = props.editorProps.styleKeys || []

  const emit = defineEmits(["update:value"])
  const [state] = useRuleFormItem(props, "value", "update:value")
  const textAlignOptions = ref([
    { label: "居左", value: "left" },
    { label: "居中", value: "center" },
    { label: "居右", value: "right" },
  ])
  watch(
    () => state.value,
    (val: any) => {},
    {
      immediate: true,
    }
  )
  onMounted(() => {})
</script>

<style lang="less"></style>
